<template>
  <div class="mobile-container">
    <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
      <van-list
          v-model:loading="state.loading"
          :finished="state.finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <van-cell v-for="item in state.list" :title="item.title">
          <van-button @click="gotoViewForm(item.form_id,item.title,item.apply_id)" size="large">前往查看</van-button>
          <van-tag type="primary" :color="item.status_color" >{{ item.status_title }}</van-tag>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import {useRouter} from "vue-router";
import {useStore} from "vuex";

import {Notify} from "vant";
import {reactive, ref} from "vue";

export default {
  name: "mobile_view_apply",
  setup() {
    const req = reactive({
      page: 0,
      back: {},
      init: false
    })
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    });

    const onLoad = async () => {
      req.init = false;
      if (state.refreshing) {
        state.list = [];
        state.refreshing = false;
      }
      fetch("api/user/self/application?size=10&page=" + req.page)
          .then(
              res => {
                if (res.status == 200) {
                  return res.json();
                }
              }
          ).then(json => {
        req.back = json;
        // console.log(json)
        if (!!req.back.items) {
          req.back.items.forEach(item => {
            // console.log(item)
            state.list.push({
              title: item.form.title,
              apply_id: item.id,
              form_id: item.form.id,
              status_id: item.status.id,
              status_title: item.status.title,
              status_color: item.status.primary_color
            })
          })
        }
        state.loading = false;
        if (!req.back.page_info.has_next_page) {
          state.finished = true;
        } else {
          req.page++;
        }
      })
    };

    const onRefresh = () => {
      // 清空列表数据
      state.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true;
      onLoad();
    };

    const gotoViewForm = (formid, title, applyid) => {
      Notify("前往" + title)
      router.push({path: "/formview", query: {formid: formid, applyid: applyid}});
    };
    const colorReverse = function (oldColor) {
      oldColor = '0x' + oldColor.replace(/#/g, '');
      let str = '000000' + (0xFFFFFF - oldColor).toString(16);
      console.log(str.substring(str.length - 6, str.length));
      return "#"+str.substring(str.length - 6, str.length);
    }
    return {
      router,
      state,
      onLoad,
      onRefresh,
      req,
      gotoViewForm,
      colorReverse
    }
  }
}
</script>

<style scoped>
.mobile-container {
  padding-top: 30px;
  padding-bottom: 200px;
}
</style>